<template>
  <div class="score-detail-page">
    <!-- 顶部工具栏 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">📊 综合评分排行榜</h1>
        <p class="page-subtitle">基于30项核心指标的Z-score标准化评分</p>
      </div>
      <button class="btn-export-main" @click="exportToExcel">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="7 10 12 15 17 10"></polyline>
          <line x1="12" y1="15" x2="12" y2="3"></line>
        </svg>
        导出Excel
      </button>
    </div>

    <!-- 加载状态 -->
    <div v-if="!scoreResult" class="loading-state">
      <div class="loading-spinner"></div>
      <p>数据加载中...</p>
    </div>

    <!-- 分支机构列表 -->
    <div v-else class="branch-list">
      <div 
        v-for="(branch, index) in sortedBranches" 
        :key="branch.orgNo"
        class="branch-card"
        :class="[getRankClass(index), { 'expanded': expandedBranches.includes(branch.orgNo) }]"
      >
        <!-- 卡片头部 -->
        <div class="card-header" @click="toggleBranch(branch.orgNo)">
          <div class="rank-badge" :class="getRankClass(index)">
            <span v-if="index < 3" class="medal">{{ ['🥇', '🥈', '🥉'][index] }}</span>
            <span v-else class="rank-number">{{ index + 1 }}</span>
          </div>
          
          <div class="branch-info">
            <h2 class="branch-name">{{ getOrgName(branch.orgNo) }}</h2>
            <div class="branch-meta">
              <span class="org-no">机构号: {{ branch.orgNo }}</span>
              <span class="indicator-count">{{ Object.keys(branch.data.scores).length }} 项指标</span>
            </div>
          </div>

          <div class="score-summary">
            <div class="main-score">{{ branch.data.weightedScore.toFixed(2) }}</div>
            <div class="score-label">综合得分</div>
          </div>

          <div class="expand-icon" :class="{ 'rotated': expandedBranches.includes(branch.orgNo) }">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="6 9 12 15 18 9"></polyline>
            </svg>
          </div>
        </div>

        <!-- 展开内容 -->
        <div v-if="expandedBranches.includes(branch.orgNo)" class="card-content">
          <!-- 详细指标得分 -->
          <div class="all-scores-section">
            <div class="section-title">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
              </svg>
              全部指标得分 ({{ Object.keys(branch.data.scores).length }})
            </div>
            
            <div class="scores-grid">
              <div 
                v-for="(scoreInfo, key) in branch.data.scores"
                :key="key"
                class="score-item"
              >
                <div class="score-item-header">
                  <span class="score-item-name">{{ scoreInfo.name }}</span>
                  <span class="score-item-weight">权重: {{ scoreInfo.weight }}</span>
                </div>
                
                <div class="score-item-metrics">
                  <div class="score-metric">
                    <span class="score-metric-label">原始值</span>
                    <span class="score-metric-value">{{ formatValue(scoreInfo.originalValue) }}</span>
                  </div>
                  <div class="score-metric">
                    <span class="score-metric-label">Z-score</span>
                    <span class="score-metric-value zscore-value" :class="getZScoreClass(scoreInfo.zScore)">
                      {{ scoreInfo.zScore?.toFixed(2) || '-' }}
                    </span>
                  </div>
                  <div class="score-metric">
                    <span class="score-metric-label">得分</span>
                    <span class="score-metric-value score-value" :class="getScoreClass(scoreInfo.score)">
                      {{ (scoreInfo.score !== undefined && scoreInfo.score !== null) ? scoreInfo.score.toFixed(2) : '-' }}
                    </span>
                  </div>
                  <div class="score-metric">
                    <span class="score-metric-label">加权分</span>
                    <span class="score-metric-value weighted-value">
                      {{ (scoreInfo.weightedScore !== undefined && scoreInfo.weightedScore !== null) ? scoreInfo.weightedScore.toFixed(2) : '-' }}
                    </span>
                  </div>
                </div>
                
                <div class="score-item-footer">
                  <span class="score-rank">排名: {{ scoreInfo.rank || '-' }}</span>
                  <span class="score-direction" :class="scoreInfo.isPositive ? 'positive' : 'negative'">
                    {{ scoreInfo.isPositive ? '↑ 正向' : '↓ 负向' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 异常指标提示 -->
        <div v-if="getAbnormalIndicators(branch.orgNo).length > 0" class="abnormal-section">
          <div class="section-title">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="12"></line>
              <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            异常指标 ({{ getAbnormalIndicators(branch.orgNo).length }})
            <span class="section-subtitle">Z-score 绝对值 > 1</span>
          </div>
          
          <div class="indicator-grid">
            <div 
              v-for="item in getAbnormalIndicators(branch.orgNo)"
              :key="item.key"
              class="indicator-card"
              :class="item.type"
            >
              <div class="indicator-header">
                <span class="indicator-name">{{ item.name }}</span>
                <span class="indicator-type-badge" :class="item.type">
                  {{ item.type === 'high-risk' ? '⚠️ 风险' : '✨ 优秀' }}
                </span>
              </div>
              
              <div class="indicator-metrics">
                <div class="metric">
                  <span class="metric-label">指标值</span>
                  <span class="metric-value">{{ formatValue(item.value) }}</span>
                </div>
                <div class="metric">
                  <span class="metric-label">Z-score</span>
                  <span class="metric-value zscore" :class="item.zScoreClass">
                    {{ item.zScore.toFixed(2) }}
                  </span>
                </div>
                <div class="metric">
                  <span class="metric-label">得分</span>
                  <span class="metric-value score">{{ item.score.toFixed(2) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useComprehensiveScore } from '../composables/useComprehensiveScore.js'

const props = defineProps({
  sharedData: {
    type: Object,
    required: true
  }
})

const { getOrgName } = useComprehensiveScore()

const scoreResult = computed(() => props.sharedData?.scoreResult || null)

// 展开的支行列表
const expandedBranches = ref([])

const sortedBranches = computed(() => {
  if (!scoreResult.value) return []
  return Object.entries(scoreResult.value.branches)
    .map(([orgNo, data]) => ({ orgNo, data }))
    .sort((a, b) => (b.data.weightedScore || 0) - (a.data.weightedScore || 0))
})

const getRankClass = (index) => {
  if (index === 0) return 'rank-1'
  if (index === 1) return 'rank-2'
  if (index === 2) return 'rank-3'
  return 'rank-other'
}

// 切换支行展开/折叠
const toggleBranch = (orgNo) => {
  const index = expandedBranches.value.indexOf(orgNo)
  if (index > -1) {
    expandedBranches.value.splice(index, 1)
  } else {
    expandedBranches.value.push(orgNo)
  }
}

// 获取Z-score样式类
const getZScoreClass = (zScore) => {
  if (!zScore) return ''
  const z = Number(zScore)
  if (z > 1) return 'zscore-high'
  if (z < -1) return 'zscore-low'
  return ''
}

// 获取得分样式类
const getScoreClass = (score) => {
  if (!score && score !== 0) return ''
  if (score >= 90) return 'excellent'
  if (score >= 75) return 'good'
  if (score >= 60) return 'fair'
  return 'poor'
}

const getAbnormalIndicators = (orgNo) => {
  if (!scoreResult.value) return []
  const data = scoreResult.value.branches[orgNo]
  const list = []
  Object.entries(data.scores || {}).forEach(([key, scoreInfo]) => {
    const z = Number(scoreInfo.zScore)
    const isPositive = scoreInfo.isPositive // 获取指标的正向/负向属性
    if (!isNaN(z) && Math.abs(z) > 1) {
      // 根据指标正向/负向属性判断类型：
      // 正向指标：Z-score > 1 表示优秀，Z-score < -1 表示风险
      // 负向指标：Z-score > 1 表示风险，Z-score < -1 表示优秀
      let type, zScoreClass
      if (isPositive) {
        // 正向指标
        type = z > 1 ? 'excellent' : 'high-risk'
        zScoreClass = z > 1 ? 'zscore-high' : 'zscore-low'
      } else {
        // 负向指标
        type = z > 1 ? 'high-risk' : 'excellent'
        zScoreClass = z > 1 ? 'zscore-high' : 'zscore-low'
      }
      
      list.push({
        key,
        name: scoreInfo.name,
        value: scoreInfo.originalValue,
        zScore: z,
        score: scoreInfo.score,
        type: type,
        zScoreClass: zScoreClass,
        isPositive: isPositive
      })
    }
  })
  return list.sort((a, b) => Math.abs(b.zScore) - Math.abs(a.zScore))
}

const formatValue = (value) => {
  if (typeof value === 'number') {
    return value.toLocaleString('zh-CN', { maximumFractionDigits: 2 })
  }
  return value
}

// 提取指标值的辅助函数
const extractIndicatorValue = (scoreInfo) => {
  if (!scoreInfo || scoreInfo.originalValue === undefined) {
    return ''
  }
  return scoreInfo.originalValue
}

// 执行导出
const performExport = (data) => {
  try {
    const XLSX = window.XLSX
    const wb = XLSX.utils.book_new()
    
    // Sheet 1: 总得分（加权得分）
    const ws1 = XLSX.utils.json_to_sheet(data.weightedScores)
    XLSX.utils.book_append_sheet(wb, ws1, '总得分')
    
    // Sheet 2: 总排名
    const ws2 = XLSX.utils.json_to_sheet(data.rankings)
    XLSX.utils.book_append_sheet(wb, ws2, '总排名')
    
    // Sheet 3: 指标值
    const ws3 = XLSX.utils.json_to_sheet(data.values)
    XLSX.utils.book_append_sheet(wb, ws3, '指标值')
    
    // Sheet 4: Z得分
    const ws4 = XLSX.utils.json_to_sheet(data.zScores)
    XLSX.utils.book_append_sheet(wb, ws4, 'Z得分')
    
    // 生成文件名
    const fileName = `综合评分汇总_${props.sharedData?.bussDate || ''}_${new Date().toISOString().slice(0, 10)}.xlsx`
    XLSX.writeFile(wb, fileName)
    
    console.log(`[导出Excel] 成功导出4个sheet`)
  } catch (err) {
    console.error('[导出Excel] 导出失败:', err)
    alert('导出Excel失败：' + err.message)
  }
}

const exportToExcel = async () => {
  if (!scoreResult.value || !props.sharedData?.scoreData) {
    alert('没有可导出的数据')
    return
  }

  try {
    // 获取所有指标的key列表（保持顺序）
    const allIndicatorKeys = []
    const indicatorNames = {}
    
    // 从第一个支行收集所有指标
    const indicatorSet = new Set()
    sortedBranches.value.forEach(branch => {
      Object.entries(branch.data.scores || {}).forEach(([key, scoreInfo]) => {
        if (!indicatorSet.has(key)) {
          indicatorSet.add(key)
          allIndicatorKeys.push(key)
          indicatorNames[key] = scoreInfo.name
        }
      })
    })
    
    // Sheet 1: 总得分（加权得分）
    const weightedScores = []
    sortedBranches.value.forEach(({ orgNo, data }) => {
      const row = {
        '支行编号': orgNo,
        '支行名称': getOrgName(orgNo)
      }
      
      // 添加每个指标的加权得分
      allIndicatorKeys.forEach(key => {
        const scoreInfo = data.scores[key]
        const weightedScore = scoreInfo?.weightedScore
        // 使用 !== undefined && !== null 来判断，避免0被当作空值
        row[indicatorNames[key]] = (weightedScore !== undefined && weightedScore !== null) ? weightedScore.toFixed(2) : ''
      })
      
      // 添加汇总列
      row['总加权得分'] = data.weightedScore.toFixed(2)
      row['总权重'] = data.totalWeight
      
      weightedScores.push(row)
    })
    
    // Sheet 2: 总排名
    const rankings = []
    sortedBranches.value.forEach(({ orgNo, data }) => {
      const row = {
        '支行编号': orgNo,
        '支行名称': getOrgName(orgNo)
      }
      
      // 添加每个指标的排名
      allIndicatorKeys.forEach(key => {
        const scoreInfo = data.scores[key]
        row[indicatorNames[key]] = scoreInfo?.rank || ''
      })
      
      // 添加总排名
      row['总排名'] = data.rank
      
      rankings.push(row)
    })
    
    // Sheet 3: 指标值
    const values = []
    sortedBranches.value.forEach(({ orgNo, data }) => {
      const row = {
        '支行编号': orgNo,
        '支行名称': getOrgName(orgNo)
      }
      
      // 添加每个指标的值
      allIndicatorKeys.forEach(key => {
        const scoreInfo = data.scores[key]
        row[indicatorNames[key]] = extractIndicatorValue(scoreInfo)
      })
      
      values.push(row)
    })
    
    // Sheet 4: Z得分
    const zScores = []
    sortedBranches.value.forEach(({ orgNo, data }) => {
      const row = {
        '支行编号': orgNo,
        '支行名称': getOrgName(orgNo)
      }
      
      // 添加每个指标的Z-score
      allIndicatorKeys.forEach(key => {
        const scoreInfo = data.scores[key]
        row[indicatorNames[key]] = scoreInfo?.zScore?.toFixed(4) || ''
      })
      
      zScores.push(row)
    })
    
    // 准备导出数据
    const exportData = {
      weightedScores,
      rankings,
      values,
      zScores
    }
    
    // 使用script标签加载xlsx库
    if (!window.XLSX) {
      const script = document.createElement('script')
      // 使用生产环境路径（打包后会在assets目录）
      // 开发环境使用 /libs/，生产环境使用 /coolv/vfs/root/products/ebi/sys/coolrpt/coolresource/assets/
      const basePath = import.meta.env.PROD 
        ? '/coolv/vfs/root/products/ebi/sys/coolrpt/coolresource/assets/'
        : '/libs/'
      script.src = basePath + 'xlsx.full.min.js'
      script.onload = () => {
        performExport(exportData)
      }
      script.onerror = () => {
        console.error('[导出Excel] 加载XLSX库失败，路径:', script.src)
        alert('导出失败：无法加载Excel库，请确保 xlsx.full.min.js 文件存在')
      }
      document.head.appendChild(script)
    } else {
      performExport(exportData)
    }
  } catch (err) {
    console.error('[导出Excel] 导出失败:', err)
    alert('导出Excel失败：' + err.message)
  }
}
</script>

<style scoped>
/* 强制重置全局样式，避免 #app * { color: #fff !important; } 的影响 */
.score-detail-page,
.score-detail-page * {
  color: initial !important;
}

.score-detail-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fd 0%, #ffffff 100%);
  padding: 24px;
  color: #1a1f36 !important;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 24px 32px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1f36 !important;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #697386 !important;
  margin: 0;
}

.btn-export-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-export-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e1e4e8;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-state p {
  margin-top: 16px;
  color: #697386 !important;
  font-size: 14px;
}

/* 分支机构列表 */
.branch-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.branch-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.branch-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.branch-card.rank-1 {
  border: 2px solid #ffd700;
}

.branch-card.rank-2 {
  border: 2px solid #c0c0c0;
}

.branch-card.rank-3 {
  border: 2px solid #cd7f32;
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  background: linear-gradient(135deg, #f8f9fd 0%, #ffffff 100%);
  border-bottom: 1px solid #e1e4e8;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-header:hover {
  background: linear-gradient(135deg, #eef2ff 0%, #f8f9fd 100%);
}

.expand-icon {
  margin-left: auto;
  color: #697386;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
}

.expand-icon.rotated {
  transform: rotate(180deg);
}

.rank-badge {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f5;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 700;
}

.rank-badge.rank-1 {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b6914;
}

.rank-badge.rank-2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
  color: #5a5a5a;
}

.rank-badge.rank-3 {
  background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
  color: #6b4423;
}

.rank-badge .medal {
  font-size: 32px;
}

.rank-badge .rank-number {
  font-size: 24px;
  color: #697386;
}

.branch-info {
  flex: 1;
}

.branch-name {
  font-size: 20px;
  font-weight: 600;
  color: #1a1f36 !important;
  margin: 0 0 6px 0;
}

.branch-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #697386 !important;
}

.org-no,
.indicator-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.score-summary {
  text-align: right;
}

.main-score {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.score-label {
  font-size: 12px;
  color: #697386 !important;
  margin-top: 4px;
}

/* 卡片展开内容 */
.card-content {
  background: #fafbfc;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 5000px;
  }
}

/* 全部指标得分区域 */
.all-scores-section {
  padding: 24px 32px;
  border-bottom: 1px solid #e1e4e8;
}

.scores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.score-item {
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  padding: 16px;
  transition: all 0.2s ease;
}

.score-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #667eea;
}

.score-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f3f5;
}

.score-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1f36 !important;
}

.score-item-weight {
  font-size: 11px;
  color: #9aa5b1 !important;
  background: #f8f9fd;
  padding: 3px 8px;
  border-radius: 6px;
}

.score-item-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.score-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-metric-label {
  font-size: 10px;
  color: #9aa5b1 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.score-metric-value {
  font-size: 13px;
  font-weight: 600;
  color: #1a1f36 !important;
}

.score-metric-value.zscore-value {
  font-family: 'Consolas', 'Monaco', monospace;
}

.score-metric-value.zscore-high {
  color: #d93025 !important;
}

.score-metric-value.zscore-low {
  color: #2b8a3e !important;
}

.score-metric-value.score-value.excellent {
  color: #2b8a3e !important;
}

.score-metric-value.score-value.good {
  color: #667eea !important;
}

.score-metric-value.score-value.fair {
  color: #f59e0b !important;
}

.score-metric-value.score-value.poor {
  color: #d93025 !important;
}

.score-metric-value.weighted-value {
  color: #667eea !important;
  font-weight: 700;
}

.score-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f1f3f5;
}

.score-rank {
  font-size: 11px;
  color: #697386 !important;
}

.score-direction {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.score-direction.positive {
  background: #d3f9d8;
  color: #2b8a3e !important;
}

.score-direction.negative {
  background: #ffe5e7;
  color: #d93025 !important;
}

/* 异常指标部分 */
.abnormal-section {
  padding: 24px 32px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1f36 !important;
  margin-bottom: 16px;
}

.section-title svg {
  color: #ff6b6b;
}

.section-subtitle {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: #9aa5b1 !important;
}

.indicator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.indicator-card {
  background: #f8f9fd;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

.indicator-card:hover {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.indicator-card.high-risk {
  border-left: 3px solid #ff6b6b;
}

.indicator-card.excellent {
  border-left: 3px solid #51cf66;
}

.indicator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}

.indicator-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1f36 !important;
}

.indicator-type-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.indicator-type-badge.high-risk {
  background: #ffe5e7;
  color: #d93025 !important;
}

.indicator-type-badge.excellent {
  background: #d3f9d8;
  color: #2b8a3e !important;
}

.indicator-metrics {
  display: flex;
  gap: 16px;
}

.metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  font-size: 11px;
  color: #9aa5b1 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 14px;
  font-weight: 600;
  color: #1a1f36 !important;
}

.metric-value.zscore {
  font-family: 'Consolas', 'Monaco', monospace;
}

.metric-value.zscore.zscore-high {
  color: #d93025 !important;
}

.metric-value.zscore.zscore-low {
  color: #2b8a3e !important;
}

.metric-value.score {
  color: #667eea !important;
}

/* 响应式 */
@media (max-width: 768px) {
  .score-detail-page {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .btn-export-main {
    width: 100%;
    justify-content: center;
  }

  .card-header {
    flex-wrap: wrap;
  }

  .indicator-grid {
    grid-template-columns: 1fr;
  }
}
</style>

